<template>
	<div class="own-color">
		<!-- here is the code of Found Page -->
		<!-- local music start -->
		<ul class="local-nav">
			<li>
				<router-link to="/locMus">
					<!-- little logo -->
					<img class="nav-logo1 nav-logo" src="../../assets/bendiyinyue.png" alt="">
					<span class="nav-title">本地音乐</span>
					<span class="nav-number">(232)</span>
					<!-- little arrow floatleft -->
					<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
				</router-link>
			</li>
			<li>
				<!-- little logo -->
				<img class="nav-logo2 nav-logo" src="../../assets/icon-downlode45.png" alt="">
				<span class="nav-title">下载管理</span>
				<span class="nav-number">(232)</span>
				<!-- little arrow floatleft -->
				<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
			</li>
			<li>
				<!-- little logo -->
				<router-link to="/hisRec">
					<img class="nav-logo3 nav-logo" src="../../assets/icon-history.png" alt="">
					<span class="nav-title">历史记录</span>
					<span class="nav-number">(232)</span>
					<!-- little arrow floatleft -->
					<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
				</router-link>	
			</li>
			<li>
				<!-- little logo -->
				<img class="nav-logo4 nav-logo" src="../../assets/icon-like45.png" alt="">
				<span class="nav-title">我的收藏</span>
				<span class="nav-number">(232)</span>
				<!-- little arrow floatleft -->
				<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
			</li>
			<li>
				<router-link to="/myRad">
					<!-- little logo -->
					<img class="nav-logo5 nav-logo" src="../../assets/diantai45.png" alt="">
					<span class="nav-title">我的电台</span>
					<span class="nav-number">(232)</span>
					<!-- little arrow floatleft -->
					<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
				</router-link>
			</li>
			<li>
				<router-link to="/posDyn">
					<!-- little logo -->
					<img class="nav-logo6 nav-logo" src="../../assets/pen45.png" alt="">
					<span class="nav-title">发表动态</span>
					<span class="nav-number">(232)</span>
					<!-- little arrow floatleft -->
					<img class="nav-arrow" src="../../assets/icon-next32.png" alt="">
				</router-link>
			</li>
		</ul>
		<p class="mar_bot"></p>
		<!-- local music end -->

		<!-- create the list of songs start -->
		<div class="songs-box">
			<div class="songs">
				<!-- the header of create songs list -->
				<router-link to="/creSon">
					<h3>创建歌单
						<span>(2)</span>
					</h3>
				</router-link>
			</div>
			<ul class="songs-list">
				<li>
					<div class="poster">
						<!-- left：img -->
						<img src="../../assets/390.png" alt="">
					</div>
					<div class="sonlistitem">
						<p>我喜欢的</p>
						<div class="detail">
							<span class="list-count">142首</span>
							<span class="down-count">110首已下载</span>
							<img class="detail-arrow" src="../../assets/icon-next32.png" alt="">
						</div>
					</div>
				</li>
				<li>
					<div class="poster">
						<!-- left：img -->
						<img src="../../assets/1190.png" alt="">
					</div>
					<div class="sonlistitem">
						<p>比较热门</p>
						<div class="detail">
							<span class="list-count">142首</span>
							<span class="down-count">110首已下载</span>
							<img class="detail-arrow" src="../../assets/icon-next32.png" alt="">
						</div>
					</div>
				</li>
				<li>
					<div class="poster">
						<!-- left：img -->
						<img src="../../assets/19240.png" height="240" width="240" alt="">
					</div>
					<div class="sonlistitem">
						<p>上班听歌</p>
						<div class="detail detail_none">
							<span class="list-count">142首</span>
							<span class="down-count">110首已下载</span>
							<img class="detail-arrow" src="../../assets/icon-next32.png" alt="">
						</div>
					</div>
				</li>
			</ul>
		</div>
		<p class="mar_bot"></p>
		<div class="songs-box box2_mar">
			<div class="songs">
				<!-- the header of create songs list -->
				<h3>创建歌单
					<span>(2)</span>
				</h3>
			</div>
			<ul class="songs-list">
				<li>
					<div class="poster">
						<!-- left：img -->
						<img src="../../assets/1390.png" alt="">
					</div>
					<div class="sonlistitem">
						<p>我喜欢的</p>
						<div class="detail">
							<span class="list-count">142首</span>
							<span class="down-count">110首已下载</span>
							<img class="detail-arrow" src="../../assets/icon-next32.png" alt="">
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="blank"></div>
		<!-- <Musicplayer /> -->
	</div>
</template>
<script>
	// 引入底部 【播放音乐】的样式
	import Musicplayer from "../../components/music_player"
	export default {
		name:'own',
		data(){
			return{
				
			}
		},
		components:{
			Musicplayer
		}
		
	}
</script>
<style scoped lang="less">
	.blank{
		width: 100%;
		height: 119 / 100rem;
	}
	// page's color is white
	.own-color{
		background-color:white;
		margin-top:88 / 100rem;
	}
	// local list{music,history,collection ect} start
	.local-nav{
		width:100%;
		li{
			// width:710/100rem;
			padding-top:30/100rem;
			padding-bottom:29/100rem;
			font-family:"苹方中等";
			border-bottom:1/100rem solid #ccc;
		}
		/*.logo{
			margin-left:20/100rem;
			margin-right:12/100rem;
		}*/
		.nav-logo{
			margin-left: 20/100rem;
			margin-right: 12/100rem;
			vertical-align: middle;
			margin-top: -10/100rem;
		}
		.nav-logo1{
			width: 32/100rem;
			height: 45/100rem;
		}
		.nav-logo2{
			width: 39/100rem;
			height: 45/100rem;
		}
		.nav-logo3{
			width: 45/100rem;
			height: 45/100rem;
		}
		.nav-logo4{
			width: 45/100rem;
			height: 43/100rem;
		}
		.nav-logo5{
			width: 47/100rem;
			height: 43/100rem;
		}
		.nav-logo6{
			width: 44/100rem;
			height: 44/100rem;
		}
		.nav-title{
			color:#333;
			font-family:"苹方中等";
			font-size:30/100rem;
			/*margin-top: 30/100rem;*/
		}
		.nav-number{
			color:#666;
			font-family:"苹方中等";
			font-size:24/100rem;
			/*margin-top: 30/100rem;*/
		}
		.nav-arrow{
			// padding-top:30/100rem;
			color:#333;
			float:right;
			width: 19/100rem;
			height: 32/100rem;
			margin-right: 20/100rem;
			// margin-top: 20/100rem;
		}
	}
	.mar_bot{
		width: 100%;
		height: 20/100rem;
		background: #dbd7df;
	}
	// local list{music,history,collection ect} end
	.songs-box{
		width:100%;
		background-color: white;
		.songs{
			margin-left:20/100rem;
			margin-bottom:20/100rem;
			
			h3{
				margin-top:39/100rem;
				font-family:"苹果粗体";
				font-size:30/100rem;
				color:#333;
				
				span{
					margin-left:20/100rem;
					color:#666;
					font-family:"苹果粗体";
					font-size:24/100rem;
				}
			}
		}
		.songs-list{
			li{
				margin-bottom:10/100rem;
				margin-left:20/100rem;
				background-color: white;
				overflow: hidden;
				.poster{
					float:left;
					width:90/100rem;
					height:90/100rem;
					// border:1/100rem solid red;
					img{
						width: 90/100rem;
						height:90/100rem;
					}
				}
				.sonlistitem{
					float:left;
					width:625/100rem;
					margin-left:10/100rem;
					p{
						font-family:"苹方粗体";
						font-size:24/100rem;
						color:#666;
						margin-bottom:10/100rem;
						margin-top: 20/100rem;
					}
					.detail{
						color:#666;
						font-size:20/100rem;
						padding-bottom:26/100rem;
						border-bottom:1/100rem solid #ccc;
						position: relative;
						.list-count{
							margin-right:12/100rem;
						}
						.detail-arrow{
							width: 19/100rem;
							height: 32/100rem;
							position: absolute;
							right: 20/100rem;
							bottom: 36/100rem;
						}
					}
					.detail_none{
						border: none;
					}
		 		}
			}
		}
	}
	.box2_mar{
		margin-bottom: 10/100rem;
	}
	// local list{music,history,collection ect} end
</style>